<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Guide</title>
    #required_css
    <link rel="stylesheet" href="$!basePath/app/docs.css">
</head>
<body>
<div class="container bs-docs-container">
    <div class="row">
        <div class="col-md-12" role="main">
            <div class="bs-docs-section">
                <h1 class="page-header">树形菜单</h1>
                <p class="lead">基于<a href="https://www.jstree.com/" target="_blank">JSTree</a>实现，需引入 <code>/framework/js/view/tree.js</code></p>

                <h2>基本实例</h2>
                <p>数据加载方式主要分为：本地数据、远程数据两种；</p>
                <div class="bs-example">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="panel panel-default">
                                <div class="panel-heading">本地数据</div>
                                <div class="panel-body">
                                    <div id="localTree"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="panel panel-default">
                                <div class="panel-heading">远程数据</div>
                                <div class="panel-body">
                                    <div id="remoteTree"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <figure class="highlight">
                    <pre class="brush: javascript">
                        //本地数据
                        localTree.jstree({
                            core: {
                                data: [
                                    'Simple root node',
                                    {
                                        id : "1",
                                        text: 'Root node 2',
                                        state: {
                                            opened: true,
                                            selected: true
                                        },
                                        children: [
                                            {text: 'Child 1'},
                                            'Child 2'
                                        ]
                                    }
                                ]
                            }
                        });
                    </pre>
                    <pre class="brush: javascript">
                        //远程数据
                        remoteTree.jstree({
                            core : {
                                data : {
                                    url : function(node){
                                        return node.id === "#" ? "$!basePath/doc/tree-data" : "$!basePath/doc/tree-data?pid="+node.id;
                                    }
                                }
                            }
                        });
                    </pre>
                    <pre class="brush: java">
                        //远程数据对应后台java代码
                        List&lt;String[]&gt; list = new ArrayList&lt;&gt;();
                        String prefix = "node-", idPrefix = "";
                        if (StringKit.isNotEmpty(pid)) {
                            prefix = "node-" + pid + "-";
                        }
                        for (int i = 1; i < 4; i++) {
                            list.add(new String[]{i + "", prefix + i});
                        }
                        return TreeTransforms.JSTree.transform2(list, (s, treeNode) -> {
                            treeNode.setId(s[0]);
                            treeNode.setText(s[1]);
                            treeNode.setLeaf(false);
                        });
                    </pre>
                </figure>

                <h2>常用操作</h2>
                <p>针对上述的本地数据的树进行操作</p>
                <div class="bs-example">
                    <button class="btn btn-default" id="btnGet">获取选中</button>
                    <button class="btn btn-default" id="btnSet">设置选中</button>
                </div>
                <figure class="highlight">
                    <pre class="brush: javascript">
                        //获取选中，多选返回array
                        localTree.jstree(true).get_selected()
                        //设置选中，传入节点id值
                        localTree.jstree(true).select_node("1");
                    </pre>
                </figure>

                <h2>参数</h2>
                <figure class="highlight active">
                    <pre class="brush: javascript">
                        //数据结构
                        {
                            id : string, // 节点的唯一标识
                            parent : string, // 上级节点唯一标识
                            text : string,// 显示文本
                            icon : string,// 图标
                            state : {
                                opened : boolean,// 展开节点
                                disabled : boolean,// 禁用节点
                                selected : boolean// 选中节点
                            },
                            children : boolean | [],// 子节点
                            li_attr : {},// li扩展参数
                            a_attr : {}// a标签扩展参数
                        }

                        //配置项
                        {
                            plugins: [],//插件列表，填入插件名称(checkbox conditionalselect contextmenu dnd massload search sort state types unique wholerow)
                            core: {
                                data: [],// 本地数据
                                data: {// 远程数据
                                    url: function (node) {
                                    },//获取远程数据地址
                                    data: function (node) {
                                    }// 处理远程数据
                                },
                                strings: {},
                                check_callback: function (operation, node, node_parent, node_position, more) {//修改树结构时触发
                                    // operation 值包含： 'create_node', 'rename_node', 'delete_node', 'move_node', 'copy_node' or 'edit'
                                    // in case of 'rename_node' node_position is filled with the new node name
                                },
                                error: function () {
                                },
                                animation: true,// 动画显示
                                multiple: true,// 多选
                                themes: {
                                    name: "",// 皮肤名称
                                    url: "",// css样式地址
                                    dir: "",// 皮肤文件夹
                                    dots: true,// 显示点
                                    icons: true,// 显示图标
                                    ellipsis: true,// 节点省略号,
                                    stripes: true,// 奇偶行背景色不同
                                    variant: false,
                                    responsive: false// 响应式
                                },
                                expand_selected_onload: true,//加载完成后，展开选中的节点
                                worker: true,
                                force_text: false, //强制显示为文本，如果传入的是html则会被转码
                                dblclick_toggle: true,// 是否可以出发双击事件

                                //****************插件参数*******************
                                //checkbox 复选框
                                checkbox: {
                                    visible: true,// 是否显示
                                    three_state: true,// 是否级联选择
                                    whole_node: true,// 点击任意位置即可选中复选框
                                    keep_selected_style: true,// 保持选中样式
                                    cascade: "",// 级联类型：up(上级联)/down(下级联)/undetermined
                                    tie_selection: true,// 自动控制复选框 （作用未知 hahaha）
                                    cascade_to_disabled: true,// 级联选择时是否选择禁用的节点
                                    cascade_to_hidden: true// 级联选择时是否选择隐藏的节点
                                },

                                //contextmenu 右键菜单
                                contextmenu: {
                                    select_node: true,
                                    show_at_node: true,
                                    items: function (node) {
                                        //数据结构
                                        return {
                                            key: {
                                                separator_before: false,// 此菜单前方是否显示分割线
                                                separator_after: false,// 此菜单后方是否显示分割线
                                                _disabled: false,// 禁用
                                                label: "",// 显示文字
                                                title: "",// 提示文字
                                                icon: "",// 图标
                                                shortcut: 113,// 快捷键值
                                                shortcut_label: "",// 快捷键名称
                                                submenu: [],// 子菜单
                                                action: function (data) {
                                                }//动作
                                            }
                                        }
                                    }
                                },

                                //dnd 拖放
                                dnd: {
                                    copy: true,// 拖放是是否复制
                                    open_timeout: 500,//超时时间
                                    is_draggable: function (node) {//判断是否可以拖拽
                                        return false;
                                    },
                                    check_while_dragging: true,//
                                    always_copy: false,// 总是复制
                                    inside_pos: 0,
                                    drag_selection: true,
                                    touch: "selected",
                                    large_drop_target: "",
                                    large_drag_target: "",
                                    use_html5: true
                                },

                                // massload 延迟加载
                                massload: true,

                                // search 搜索
                                search: {
                                    ajax: true,// 异步执行
                                    fuzzy: false,// 模糊查询
                                    case_sensitive: false,// 大小写敏感
                                    show_only_matches: false,// 仅显示匹配的节点
                                    show_only_matches_children: false,// 仅显示匹配节点的子节点
                                    close_opened_onclear: true,// 清除时关闭节点
                                    search_leaves_only: false,//
                                    search_callback: false
                                },

                                // sort 排序
                                sort: function (node1, node2) {
                                    return 1 | -1;
                                },

                                // state 状态
                                state: {
                                    key: "jstree",
                                    events: "changed.js open_node.jstreee close_node.jstree",
                                    ttl: "false",
                                    filter: function () {
                                    }
                                },

                                // types
                                types: {
                                    max_children: -1,
                                    max_depth: -1,
                                    valid_children: -1,
                                    icon: "",
                                    li_attr: {},
                                    a_attr: {}
                                },

                                //unique 唯一
                                unique: {
                                    case_sensitive: false, //大小写敏感
                                    duplicate: function () {
                                    }//检查节点是否冲突
                                }
                            }
                        }
                    </pre>
                </figure>
                <h2>方法</h2>
                <blockquote>
                    <p>首先需要获取到树对象，然后才能调用方法 <code>$('el').jstree(true).方法名()</code></p>
                    <p>参数中的节点表示：DOM元素、jQuery对象、jQuery表达式、节点ID值</p>
                    <p>参数中的DOM表示：是否返回DOM节点对象</p>
                </blockquote>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>参数</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>create</td>
                            <td>节点， 参数</td>
                            <td>创建树</td>
                        </tr>
                        <tr>
                            <td>destroy</td>
                            <td></td>
                            <td>销毁树</td>
                        </tr>
                        <tr>
                            <td>reference</td>
                            <td>节点</td>
                            <td>获取jstree对象， 等同于$("el").jstree(true)</td>
                        </tr>
                        <tr>
                            <td>get_container</td>
                            <td></td>
                            <td>获取jQuery容器</td>
                        </tr>
                        <tr>
                            <td>get_node</td>
                            <td>节点，DOM</td>
                            <td>获取节点数据</td>
                        </tr>
                        <tr>
                            <td>get_path</td>
                            <td>节点，分割字符，ids</td>
                            <td>获取当前节点路径</td>
                        </tr>
                        <tr>
                            <td>get_next_dom</td>
                            <td>节点</td>
                            <td>获取下一个节点</td>
                        </tr>
                        <tr>
                            <td>get_prev_dom</td>
                            <td>节点</td>
                            <td>获取上一个节点</td>
                        </tr>
                        <tr>
                            <td>get_parent</td>
                            <td>节点</td>
                            <td>获取父节点</td>
                        </tr>
                        <tr>
                            <td>get_children_dom</td>
                            <td>节点</td>
                            <td>获取子节点（一级）</td>
                        </tr>
                        <tr>
                            <td>is_parent</td>
                            <td>节点</td>
                            <td>是否有子节点</td>
                        </tr>
                        <tr>
                            <td>is_loaded</td>
                            <td>节点</td>
                            <td>节点是否已经加载，远程数据时生效</td>
                        </tr>
                        <tr>
                            <td>is_opened</td>
                            <td>节点</td>
                            <td>节点是否已经展开</td>
                        </tr>
                        <tr>
                            <td>is_closed</td>
                            <td>节点</td>
                            <td>节点是否已经关闭</td>
                        </tr>
                        <tr>
                            <td>is_leaf</td>
                            <td>节点</td>
                            <td>节点是否不包含子节点</td>
                        </tr>
                        <tr>
                            <td>load_node</td>
                            <td>节点，回调函数</td>
                            <td>加载节点。 触发 <code>load_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>load_all</td>
                            <td>节点，回调函数</td>
                            <td>加载所有节点。触发 <code>load_all.jstree</code></td>
                        </tr>
                        <tr>
                            <td>redraw</td>
                            <td>是否重绘所有节点</td>
                            <td>重绘节点</td>
                        </tr>
                        <tr>
                            <td>open_node</td>
                            <td>节点</td>
                            <td>展开节点。触发 <code>open_node.jstree after_open.jstree before_open.jstree</code></td>
                        </tr>
                        <tr>
                            <td>close_node</td>
                            <td>节点</td>
                            <td>关闭节点。触发 <code>close_node.jstree after_close.jstree</code></td>
                        </tr>
                        <tr>
                            <td>toggle_node</td>
                            <td>节点</td>
                            <td>展开/关闭节点</td>
                        </tr>
                        <tr>
                            <td>open_all</td>
                            <td>节点，动画显示</td>
                            <td>展开所有节点。触发 <code>open_all.jstree</code></td>
                        </tr>
                        <tr>
                            <td>close_all</td>
                            <td>节点</td>
                            <td>关闭所有节点。触发 <code>close_all.jstree</code></td>
                        </tr>
                        <tr>
                            <td>is_disabled</td>
                            <td>节点</td>
                            <td>是否禁用</td>
                        </tr>
                        <tr>
                            <td>enable_node</td>
                            <td>节点</td>
                            <td>启用节点。触发 <code>enable_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>disable_node</td>
                            <td>节点</td>
                            <td>禁用节点。触发 <code>disable_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>is_hidden</td>
                            <td>节点</td>
                            <td>是否隐藏</td>
                        </tr>
                        <tr>
                            <td>hide_node</td>
                            <td>节点</td>
                            <td>隐藏节点。触发 <code>hide_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>show_node</td>
                            <td>节点</td>
                            <td>显示节点。触发 <code>show_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>show_all</td>
                            <td>节点</td>
                            <td>显示所有节点。触发 <code>show_all.jstree</code></td>
                        </tr>
                        <tr>
                            <td>hide_all</td>
                            <td>节点</td>
                            <td>显示所有节点。触发 <code>hide_all.jstree</code></td>
                        </tr>
                        <tr>
                            <td>select_node</td>
                            <td>节点，是否触发<code>changed.jstree</code>事件，prevent_open</td>
                            <td>选中节点。触发 <code>select_node.jstree changed.jstree</code></td>
                        </tr>
                        <tr>
                            <td>deselect_node</td>
                            <td>节点</td>
                            <td>取消选中节点。触发 <code>deselect_node.jstree changed.jstree</code></td>
                        </tr>
                        <tr>
                            <td>select_all</td>
                            <td>节点</td>
                            <td>选中所有。触发 <code>select_all.jstree changed.jstree</code></td>
                        </tr>
                        <tr>
                            <td>deselect_all</td>
                            <td>节点</td>
                            <td>取消选中所有。触发 <code>deselect_all.jstree changed.jstree</code></td>
                        </tr>
                        <tr>
                            <td>is_selected</td>
                            <td>节点</td>
                            <td>是否选中</td>
                        </tr>
                        <tr>
                            <td>get_selected</td>
                            <td>是否返回完整节点数据</td>
                            <td>获取选中的节点，默认返回id集合</td>
                        </tr>
                        <tr>
                            <td>get_top_selected</td>
                            <td>是否返回完整节点数据</td>
                            <td>获取选中的第一级节点，默认返回id集合</td>
                        </tr>
                        <tr>
                            <td>get_bottom_selected</td>
                            <td>是否返回完整节点数据</td>
                            <td>获取选中的最后一级节点，默认返回id集合</td>
                        </tr>
                        <tr>
                            <td>refresh</td>
                            <td>跳过加载显， 忽略状态</td>
                            <td>刷新树。触发 <code>refresh.jstree</code></td>
                        </tr>
                        <tr>
                            <td>refresh_node</td>
                            <td>节点</td>
                            <td>刷新节点。触发 <code>refresh_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>set_id</td>
                            <td>节点，ID</td>
                            <td>设置ID值。触发 <code>set_id.jstree</code></td>
                        </tr>
                        <tr>
                            <td>get_text</td>
                            <td>节点</td>
                            <td>获取节点的显示文本</td>
                        </tr>
                        <tr>
                            <td>get_json</td>
                            <td>节点</td>
                            <td>获取节点的JSON格式数据</td>
                        </tr>
                        <tr>
                            <td>create_node</td>
                            <td>上级节点，节点数据，位置（first/last），回调函数，是否已经加载</td>
                            <td>创建节点。触发 <code>create_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>rename_node</td>
                            <td>节点，显示文本</td>
                            <td>重命名节点。触发 <code>rename_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>delete_node</td>
                            <td>节点</td>
                            <td>删除节点。触发 <code>delete_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>move_node</td>
                            <td>节点，上级节点，位置（first/last），回调函数，是否已经加载，跳过redraw</td>
                            <td>创建节点。触发 <code>move_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>copy_node</td>
                            <td>节点，上级节点，位置（first/last），回调函数，是否已经加载，跳过redraw</td>
                            <td>复制节点。触发 <code>copy_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>cut</td>
                            <td>节点</td>
                            <td>剪切节点。触发 <code>cut.jstree</code></td>
                        </tr>
                        <tr>
                            <td>copy</td>
                            <td>节点</td>
                            <td>复制节点。触发 <code>copy.jstree</code></td>
                        </tr>
                        <tr>
                            <td>get_buffer</td>
                            <td></td>
                            <td>获取粘贴板中的节点，来源自cut和copy</td>
                        </tr>
                        <tr>
                            <td>can_paste</td>
                            <td></td>
                            <td>是否可以粘贴</td>
                        </tr>
                        <tr>
                            <td>paste</td>
                            <td>节点</td>
                            <td>粘贴节点。触发 <code>paste.jstree</code></td>
                        </tr>
                        <tr>
                            <td>clear_buffer</td>
                            <td>节点</td>
                            <td>清空粘贴板中的节点。触发 <code>clear_buffer.jstree</code></td>
                        </tr>
                        <tr>
                            <td>edit</td>
                            <td>节点, 默认显示文本，回调函数</td>
                            <td>编辑节点</td>
                        </tr>
                        <tr>
                            <td>set_theme</td>
                            <td>皮肤名称，皮肤地址</td>
                            <td>设置皮肤。触发 <code>set_theme.jstree</code></td>
                        </tr>
                        <tr>
                            <td>get_theme</td>
                            <td></td>
                            <td>获取皮肤，返回皮肤名称</td>
                        </tr>
                        <tr>
                            <td>show_stripes</td>
                            <td></td>
                            <td>显示奇偶行不同背景色。触发 <code>show_stripes.jstree</code></td>
                        </tr>
                        <tr>
                            <td>hide_stripes</td>
                            <td></td>
                            <td>取消显示奇偶行不同背景色。触发 <code>hide_stripes.jstree</code></td>
                        </tr>
                        <tr>
                            <td>toggle_stripes</td>
                            <td></td>
                            <td>切换奇偶行不同背景色</td>
                        </tr>
                        <tr>
                            <td>show_dots</td>
                            <td></td>
                            <td>显示点。触发 <code>show_dots.jstree</code></td>
                        </tr>
                        <tr>
                            <td>hide_dots</td>
                            <td></td>
                            <td>取消显示点。触发 <code>hide_dots.jstree</code></td>
                        </tr>
                        <tr>
                            <td>toggle_dots</td>
                            <td></td>
                            <td>切换显示点</td>
                        </tr>
                        <tr>
                            <td>show_icon</td>
                            <td></td>
                            <td>显示图标。触发 <code>show_icon.jstree</code></td>
                        </tr>
                        <tr>
                            <td>hide_icon</td>
                            <td></td>
                            <td>隐藏图标。触发 <code>hide_icon.jstree</code></td>
                        </tr>
                        <tr>
                            <td>toggle_icon</td>
                            <td></td>
                            <td>切换显示图标</td>
                        </tr>
                        <tr>
                            <td>show_ellipsis</td>
                            <td></td>
                            <td>显示省略号。触发 <code>show_ellipsis.jstree</code></td>
                        </tr>
                        <tr>
                            <td>hide_ellipsis</td>
                            <td></td>
                            <td>隐藏省略号。触发 <code>hide_ellipsis.jstree</code></td>
                        </tr>
                        <tr>
                            <td>toggle_ellipsis</td>
                            <td></td>
                            <td>切换显示省略号</td>
                        </tr>
                        <tr>
                            <th colspan="3">Checkbox 复选框</th>
                        </tr>
                        <tr>
                            <td>show_checkboxes</td>
                            <td></td>
                            <td>显示复选框</td>
                        </tr>
                        <tr>
                            <td>hide_checkboxes</td>
                            <td></td>
                            <td>隐藏复选框</td>
                        </tr>
                        <tr>
                            <td>toggle_checkboxes</td>
                            <td></td>
                            <td>切换显示复选框</td>
                        </tr>
                        <tr>
                            <td>is_undetermined</td>
                            <td>节点</td>
                            <td>是否为半选中状态</td>
                        </tr>
                        <tr>
                            <td>disable_checkbox</td>
                            <td>节点</td>
                            <td>禁用复选框。触发 <code>disable_checkbox.jstree</code></td>
                        </tr>
                        <tr>
                            <td>enable_checkbox</td>
                            <td>节点</td>
                            <td>启用复选框。触发 <code>enable_checkbox.jstree</code></td>
                        </tr>
                        <tr>
                            <td>check_node</td>
                            <td>节点</td>
                            <td>选中复选框。触发 <code>check_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>uncheck_node</td>
                            <td>节点</td>
                            <td>取消选中复选框。触发 <code>uncheck_node.jstree</code></td>
                        </tr>
                        <tr>
                            <td>check_all</td>
                            <td></td>
                            <td>全选所有复选框。触发 <code>check_all.jstree</code></td>
                        </tr>
                        <tr>
                            <td>uncheck_all</td>
                            <td></td>
                            <td>取消选中全部复选框。触发 <code>uncheck_all.jstree</code></td>
                        </tr>
                        <tr>
                            <td>is_checked</td>
                            <td>节点</td>
                            <td>是否选中</td>
                        </tr>
                        <tr>
                            <td>get_checked</td>
                            <td>返回全部数据</td>
                            <td>获取选中的节点</td>
                        </tr>
                        <tr>
                            <td>get_top_checked</td>
                            <td>返回全部数据</td>
                            <td>获取选中的第一级节点</td>
                        </tr>
                        <tr>
                            <td>get_bottom_checked</td>
                            <td>返回全部数据</td>
                            <td>获取选中的最后一级节点</td>
                        </tr>
                        <tr>
                            <th colspan="3">Contextmenu 右键菜单</th>
                        </tr>
                        <tr>
                            <td>show_contextmenu</td>
                            <td>节点</td>
                            <td>显示右键菜单</td>
                        </tr>
                        <tr>
                            <th colspan="3">search 搜索</th>
                        </tr>
                        <tr>
                            <td>search</td>
                            <td>关键字，是否本地搜索</td>
                            <td>搜索</td>
                        </tr>
                        <tr>
                            <td>clear_search</td>
                            <td></td>
                            <td>清除搜索</td>
                        </tr>
                        <tr>
                            <th colspan="3">state 状态</th>
                        </tr>
                        <tr>
                            <td>save_state</td>
                            <td></td>
                            <td>保存状态</td>
                        </tr>
                        <tr>
                            <td>restore_state</td>
                            <td></td>
                            <td>还原状态</td>
                        </tr>
                        <tr>
                            <td>clear_state</td>
                            <td></td>
                            <td>清除保存的状态</td>
                        </tr>
                        <tr>
                            <th colspan="3">types</th>
                        </tr>
                        <tr>
                            <td>get_rules</td>
                            <td>节点</td>
                            <td>获取规则</td>
                        </tr>
                        <tr>
                            <td>get_type</td>
                            <td>节点</td>
                            <td>获取节点类型</td>
                        </tr>
                        <tr>
                            <td>set_type</td>
                            <td>节点，类型</td>
                            <td>设置节点类型</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h2>事件</h2>
                <blockquote>
                    <p>
                        在初始化时，通过on来绑定事件。如：<br>
                        <code>$('el').jstree({}).on("事件名", function(参数1， 参数2， 参数N){})</code>
                    </p>
                </blockquote>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>参数</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tbody>
                        <tr>
                            <td>init.jstree</td>
                            <td></td>
                            <td>初始化</td>
                        </tr>
                        <tr>
                            <td>loading.jstree</td>
                            <td></td>
                            <td>加载</td>
                        </tr>
                        <tr>
                            <td>destroy.jstree</td>
                            <td></td>
                            <td>销毁</td>
                        </tr>
                        <tr>
                            <td>loaded.jstree</td>
                            <td></td>
                            <td>加载完成</td>
                        </tr>
                        <tr>
                            <td>ready.jstree</td>
                            <td></td>
                            <td>准备完成</td>
                        </tr>
                        <tr>
                            <td>load_node.jstree</td>
                            <td></td>
                            <td>加载节点</td>
                        </tr>
                        <tr>
                            <td>load_all.jstree</td>
                            <td></td>
                            <td>加载所有节点</td>
                        </tr>
                        <tr>
                            <td>model.jstree</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>redraw.jstree</td>
                            <td></td>
                            <td>重绘</td>
                        </tr>
                        <tr>
                            <td>open_node.jstree</td>
                            <td></td>
                            <td>关闭节点</td>
                        </tr>
                        <tr>
                            <td>before_open.jstree</td>
                            <td></td>
                            <td>展开节点前</td>
                        </tr>
                        <tr>
                            <td>after_open.jstree</td>
                            <td></td>
                            <td>展开节点后</td>
                        </tr>
                        <tr>
                            <td>close_node.jstree</td>
                            <td></td>
                            <td>折叠节点</td>
                        </tr>
                        <tr>
                            <td>after_close.jstree</td>
                            <td></td>
                            <td>折叠后</td>
                        </tr>
                        <tr>
                            <td>open_all.jstree</td>
                            <td></td>
                            <td>展开所有</td>
                        </tr>
                        <tr>
                            <td>close_all.jstree</td>
                            <td></td>
                            <td>折叠所有</td>
                        </tr>
                        <tr>
                            <td>enable_node.jstree</td>
                            <td></td>
                            <td>启用节点</td>
                        </tr>
                        <tr>
                            <td>disable_node.jstree</td>
                            <td></td>
                            <td>禁用节点</td>
                        </tr>
                        <tr>
                            <td>hide_node.jstree</td>
                            <td></td>
                            <td>隐藏节点</td>
                        </tr>
                        <tr>
                            <td>show_node.jstree</td>
                            <td></td>
                            <td>显示节点</td>
                        </tr>
                        <tr>
                            <td>hide_all.jstree</td>
                            <td></td>
                            <td>隐藏所有节点</td>
                        </tr>
                        <tr>
                            <td>show_all.jstree</td>
                            <td></td>
                            <td>显示所有节点</td>
                        </tr>
                        <tr>
                            <td>activate_node.jstree</td>
                            <td></td>
                            <td>激活节点</td>
                        </tr>
                        <tr>
                            <td>hover_node.jstree</td>
                            <td></td>
                            <td>悬浮在节点上</td>
                        </tr>
                        <tr>
                            <td>dehover_node.jstree</td>
                            <td></td>
                            <td>悬浮后移走</td>
                        </tr>
                        <tr>
                            <td>select_node.jstree</td>
                            <td></td>
                            <td>选中节点</td>
                        </tr>
                        <tr>
                            <td>changed.jstree</td>
                            <td></td>
                            <td>节点变更</td>
                        </tr>
                        <tr>
                            <td>deselect_node.jstree</td>
                            <td></td>
                            <td>取消选择节点</td>
                        </tr>
                        <tr>
                            <td>select_all.jstree</td>
                            <td></td>
                            <td>选中所有节点</td>
                        </tr>
                        <tr>
                            <td>deselect_all.jstree</td>
                            <td></td>
                            <td>取消选中所有节点</td>
                        </tr>
                        <tr>
                            <td>set_state.jstree</td>
                            <td></td>
                            <td>设置状态</td>
                        </tr>
                        <tr>
                            <td>refresh.jstree</td>
                            <td></td>
                            <td>刷新树</td>
                        </tr>
                        <tr>
                            <td>refresh_node.jstree</td>
                            <td></td>
                            <td>刷新节点</td>
                        </tr>
                        <tr>
                            <td>set_id.jstree</td>
                            <td></td>
                            <td>设置ID</td>
                        </tr>
                        <tr>
                            <td>set_text.jstree</td>
                            <td></td>
                            <td>设置显示文本</td>
                        </tr>
                        <tr>
                            <td>create_node.jstree</td>
                            <td></td>
                            <td>创建新节点</td>
                        </tr>
                        <tr>
                            <td>rename_node.jstree</td>
                            <td></td>
                            <td>节点重命名</td>
                        </tr>
                        <tr>
                            <td>delete_node.jstree</td>
                            <td></td>
                            <td>删除节点</td>
                        </tr>
                        <tr>
                            <td>move_node.jstree</td>
                            <td></td>
                            <td>移动节点</td>
                        </tr>
                        <tr>
                            <td>copy_node.jstree</td>
                            <td></td>
                            <td>复制节点</td>
                        </tr>
                        <tr>
                            <td>cut.jstree</td>
                            <td></td>
                            <td>剪切</td>
                        </tr>
                        <tr>
                            <td>copy.jstree</td>
                            <td></td>
                            <td>复制节点</td>
                        </tr>
                        <tr>
                            <td>paste.jstree</td>
                            <td></td>
                            <td>粘贴</td>
                        </tr>
                        <tr>
                            <td>clear_buffer.jstree</td>
                            <td></td>
                            <td>清除剪贴板</td>
                        </tr>
                        <tr>
                            <td>set_theme.jstree</td>
                            <td></td>
                            <td>设置皮肤</td>
                        </tr>
                        <tr>
                            <td>show_stripes.jstree</td>
                            <td></td>
                            <td>显示奇偶行不同背景色</td>
                        </tr>
                        <tr>
                            <td>hide_stripes.jstree</td>
                            <td></td>
                            <td>隐藏奇偶行不同背景色</td>
                        </tr>
                        <tr>
                            <td>disable_checkbox.jstree</td>
                            <td></td>
                            <td>禁用复选框</td>
                        </tr>
                        <tr>
                            <td>enable_checkbox.jstree</td>
                            <td></td>
                            <td>启用复选框</td>
                        </tr>
                        <tr>
                            <td>check_node.jstree</td>
                            <td></td>
                            <td>选中节点</td>
                        </tr>
                        <tr>
                            <td>uncheck_node.jstree</td>
                            <td></td>
                            <td>取消选中节点</td>
                        </tr>
                        <tr>
                            <td>check_all.jstree</td>
                            <td></td>
                            <td>全部选中</td>
                        </tr>
                        <tr>
                            <td>uncheck_all.jstree</td>
                            <td></td>
                            <td>取消全部选中</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h2>扩展</h2>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>参数</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tbody>
                        <tr>
                            <td>ns.view.tree.contextmenu.renderCheckItems()</td>
                            <td></td>
                            <td>为树增加全选、全不选、反选功能，配置在contextmenu.items参数上</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
#required_js
<script type="text/javascript" src="$!basePath/app/docs.js"></script>

<script>
    ns.requireJS("/framework/js/view/tree.js");
    ns.ready(function () {
        var localTree = $("#localTree"), remoteTree = $("#remoteTree");

        localTree.jstree({
            core: {
                data: [
                    'Simple root node',
                    {
                        text: 'Root node 2',
                        state: {
                            opened: true,
                            selected: true
                        },
                        children: [
                            {id: "1", text: 'Child 1'},
                            'Child 2'
                        ]
                    }
                ]
            }
        });

        remoteTree.jstree({
            core: {
                data: {
                    url: function (node) {
                        return node.id === "#" ? "$!basePath/doc/tree-data" : "$!basePath/doc/tree-data?pid=" + node.id;
                    }
                }
            }
        });

        $("#btnGet").on("click", function () {
            alert(localTree.jstree(true).get_selected());
        });

        $("#btnSet").on("click", function () {
            localTree.jstree(true).select_node("1");
        });
    });
</script>
</html>